<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" class="myform">
      <el-form-item label="上新年/月" class="myform-item">
        <el-date-picker
          value-format="yyyy-MM"
          v-model="form.new_year"
          type="month"
          placeholder="选择年月"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="款号/款名/套装编号" class="myform-item">
        <el-input
          v-model="form.title"
          placeholder="请输入款号/款名/套装编号"
          @keyup.enter.native="onSearch"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <!-- <el-button type="warning" @click="onUpdate">更新</el-button> -->
        <!-- <el-button type="primary" @click="onSetMonth">设置上新月份</el-button> -->
      </el-form-item>
    </el-form>
    <div style="display: flex; align-items: center; margin: 20px 0">
      <div style="margin-right: 30px">部门：</div>
      <el-checkbox
        v-model="department.OperationsDepartment"
        @change="onChangeTable"
        >技术部</el-checkbox
      >
      <el-checkbox v-model="department.marketing" @change="onChangeTable"
        >营销部</el-checkbox
      >
      <el-checkbox v-model="department.design" @change="onChangeTable"
        >设计部</el-checkbox
      >
      <el-checkbox v-model="department.product" @change="onChangeTable"
        >产品部</el-checkbox
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="mini"
      :header-cell-style="{ background: '#F5F7FA' }"
      :cell-style="changeCellStyle"
      :height="height"
      ref="ElTableHeaderRef"
    >
      <el-table-column
        fixed
        label="款式信息"
        align="center"
        prop="image"
        width="160"
      >
        <template slot-scope="{ row }">
          <div>
            <div>
              <el-image
                :src="row.image[0]"
                style="width: 100px"
                :preview-src-list="[row.image[0]]"
              ></el-image>
            </div>
            <div>
              <div>
                <span>款式名称：{{ row.type_name }}</span>
                <el-button
                                    type="text"
                                    @click="onAllEdit(1, '款式名称', 'type_name', row.id, row.type_name)"
                                >
                                    <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                                </el-button>
              </div>
              <div>{{ row.type_no }}</div>
              <div>{{ row.design_classification }}</div>
              <div>套装编码：{{ row.package_number }}</div>
              <div :style="{ color: row.status != 0 ? '#2c70d6' : '' }">
                状态：{{
                  row.status == 0
                    ? "未确认"
                    : row.status == 1
                    ? "设计已确认"
                    : row.status == 2
                    ? "技术已确认"
                    : row.status == 3
                    ? "生产已确认"
                    : ""
                }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="面料成分"
        align="center"
        prop="fabric"
        width="160"
        v-if="department.OperationsDepartment"
      >
        <template slot-scope="{ row }" v-if="row.fabric">
          <div v-if="row.fabric.lining_one">{{ row.fabric.lining_one }}</div>
          <div v-if="row.fabric.lining_two">{{ row.fabric.lining_two }}</div>
          <div v-if="row.fabric.lining_three">
            {{ row.fabric.lining_three }}
          </div>
          <div v-if="row.fabric.lining_four">{{ row.fabric.lining_four }}</div>
          <div v-if="row.fabric.lining_five">{{ row.fabric.lining_five }}</div>
        </template>
      </el-table-column>
       <el-table-column
        label="指数"
        align="center"
        prop="dressing_index"
        min-width="200"
        v-if="department.OperationsDepartment"
      >
        <template slot-scope="{ row }">
          <div>
            <div v-for="(item, index) in row.dressing_index" :key="item">
              {{
                index == 0
                  ? "版型指数："
                  : index == 1
                  ? "弹力指数："
                  : index == 2
                  ? "硬度指数："
                  : index == 3
                  ? "厚度指数："
                  : ""
              }}{{ item }}
            </div>
            <div v-if="row.chanping_status == 0">
              <!-- <el-button type="text" @click="onIndex(row.id)">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="尺码"
        align="center"
        prop="sizelist"
        width="780"
        v-if="department.OperationsDepartment"
      >
        <template slot-scope="{ row }" v-if="row.products_size_type.length">
          <div class="sizelist">
            <div>
              <el-table
                :data="row.products_size"
                border
                style="width: 100%"
                size="mini"
                :header-cell-style="{ background: '#F5F7FA', height: '100px' }"
              >
                <el-table-column prop="size" label="尺码/部位" align="center">
                  <div
                    slot-scope="{ row }"
                    style="height: 40px; line-height: 40px"
                  >
                    {{ row.size }}
                  </div>
                </el-table-column>
              </el-table>
            </div>
            <el-table
              :data="row.sizelist"
              border
              :style="{
                width: (row.products_size_type.length + 1) * 50 + 'px',
              }"
              size="mini"
              :header-cell-style="{ background: '#F5F7FA', height: '100px' }"
            >
              <el-table-column
                :prop="item.t2"
                :label="item.t2"
                align="center"
                v-for="(item, index) in row.products_size_type"
                :key="index"
              >
                <div
                  slot-scope="{ row }"
                  style="height: 40px; line-height: 40px"
                >
                  {{ row[item.t2] }}
                </div>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="页面尺码推荐"
        align="center"
        prop="recommend_size_group"
        width="580"
        v-if="department.OperationsDepartment"
      >
        <template slot-scope="{ row }">
          <div class="sizelist" v-if="row.size_range.length">
            <div>
              <el-table
                :data="row.long_code"
                border
                style="width: 100%"
                size="mini"
                :header-cell-style="{ background: '#F5F7FA' }"
              >
                <el-table-column prop="size" label="尺码/部位" align="center">
                  <div
                    slot-scope="{ row }"
                    style="height: 40px; line-height: 40px"
                  >
                    {{ row.title_ch }}
                  </div>
                </el-table-column>
              </el-table>
            </div>
            <el-table
              :data="row.recommend_size_group"
              border
              :style="{ width: (row.size_range.length + 1) * 50 + 'px' }"
              size="mini"
              :header-cell-style="{ background: '#F5F7FA' }"
            >
              <el-table-column
                :prop="item.title_ch"
                :label="item.title_ch"
                align="center"
                v-for="(item, index) in row.size_range"
                :key="index"
              >
                <div
                  slot-scope="{ row }"
                  style="height: 40px; line-height: 40px"
                >
                  {{ row[item.title_ch] }}
                </div>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="技术部确认状态"
        align="center"
        prop="yunyin_status"
        min-width="200"
        v-if="department.OperationsDepartment"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <div v-if="row.yunyin_status == 0">
            <!-- <el-button type="text" @click="onEditCM(row.id)">编辑尺码推荐</el-button> -->
          </div>
          <div :style="{ color: row.yunyin_status == 1 ? '#2c70d6' : '' }">
            {{ row.yunyin_status == 0 ? "未确认" : "已确认" }}
          </div>
          <el-button
            type="primary"
            @click="onAffirm(1, 0, row.id)"
            v-if="row.yunyin_status == 0"
            >确认</el-button
          >
          <el-button
            type="danger"
            @click="onAffirm(1, 1, row.id)"
            v-if="row.yunyin_status == 1"
            >取消确认</el-button
          >
          <div v-if="row.yunyin_up_usernane">
            确认人：{{ row.yunyin_up_usernane }}
          </div>
          <div v-if="row.yunyin_up_time">
            确认时间：{{ row.yunyin_up_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品描述"
        align="center"
        prop="product_description"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.product_description }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '产品描述', 'product_description', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="图片配字"
        align="center"
        prop="picture_matching"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.picture_matching }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '图片配字', 'picture_matching', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="部件细节"
        align="center"
        prop="component_details"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.component_details }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '部件细节', 'component_details', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="页面温馨提示"
        align="center"
        prop="page_warm_tips"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.page_warm_tips }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '页面温馨提示', 'page_warm_tips', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="稚颜妙语"
        align="center"
        prop="childish_wit"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.childish_wit }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '稚颜妙语', 'childish_wit', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="穿法细节描述"
        align="center"
        prop="threading_description"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.threading_description }}</div>

            <div v-if="row.yingxiao_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(2, '穿法描述', 'threading_description', row.id)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="营销部确认状态"
        align="center"
        prop="yingxiao_status"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }">
          <div :style="{ color: row.yingxiao_status == 1 ? '#2c70d6' : '' }">
            {{ row.yingxiao_status == 0 ? "未确认" : "已确认" }}
          </div>
          <div v-if="row.yingxiao_up_username">
            确认人：{{ row.yingxiao_up_username }}
          </div>
          <div v-if="row.yingxiao_up_time">
            确认时间：{{ row.yingxiao_up_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="营销部确认"
        align="center"
        prop="yingxiao_status"
        min-width="200"
        v-if="department.marketing"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <el-button
            type="text"
            @click="onAffirm(2, 0, row.id)"
            v-if="row.yingxiao_status == 0"
            >确认</el-button
          >
          <el-button
            type="text"
            @click="onAffirm(2, 1, row.id)"
            style="color: red"
            v-if="row.yingxiao_status == 1"
            >取消确认</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="设计主题"
        align="center"
        prop="design_theme"
        min-width="200"
        v-if="department.design"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.design_theme }}</div>

            <div v-if="row.sheji_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(3, '设计主题', 'design_theme', row.id, row.design_theme)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
                label="纹祥描述"
                align="center"
                prop="pattern_description"
                min-width="200"
                v-if="department.design"
            >
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.pattern_description }}</div>

                        <div v-if="row.sheji_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(3, '纹祥描述', 'pattern_description', row.id, row.pattern_description)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>-->
      <el-table-column
        label="描述/纹祥图"
        align="center"
        prop="theme_sample"
        width="600"
        v-if="department.design"
      >
        <template slot-scope="{ row }">
          <div>
            <!-- <el-image
                            :src="row.theme_sample[0]"
                            style="width:200px"
                            :preview-src-list="[row.theme_sample[0]]"
                            v-if="row.theme_sample[0]"
                        ></el-image>-->
            <el-table
              :data="row.theme_sample"
              border
              size="mini"
              :header-cell-style="{ background: '#F5F7FA' }"
            >
              <el-table-column
                prop="pattern_description"
                label="描述"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="theme_sample"
                label="纹祥图"
                align="center"
              >
                <template slot-scope="scope">
                  <el-image
                    :src="scope.row.theme_sample"
                    style="width: 50px"
                    :preview-src-list="[scope.row.theme_sample]"
                    v-if="scope.row.theme_sample"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="
                      onEditMT(
                        row.theme_sample,
                        scope.row,
                        scope.$index,
                        row.id
                      )
                    "
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    style="color: red"
                    @click="onDeleteMT(row.theme_sample, scope.$index, row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div v-if="row.sheji_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(3, '描述/纹祥图', 'theme_sample', row)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="设计部确认状态"
        align="center"
        prop="sheji_status"
        min-width="200"
        v-if="department.design"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <div :style="{ color: row.sheji_status == 1 ? '#2c70d6' : '' }">
            {{ row.sheji_status == 0 ? "未确认" : "已确认" }}
          </div>
          <div v-if="row.sheji_up_username">
            确认人：{{ row.sheji_up_username }}
          </div>
          <div v-if="row.sheji_up_time">确认时间：{{ row.sheji_up_time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="设计部确认"
        align="center"
        prop="sheji_status"
        min-width="200"
        v-if="department.design"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <el-button
            type="text"
            @click="onAffirm(3, 0, row.id)"
            v-if="row.sheji_status == 0"
            >确认</el-button
          >
          <el-button
            type="text"
            @click="onAffirm(3, 1, row.id)"
            style="color: red"
            v-if="row.sheji_status == 1"
            >取消确认</el-button
          >
        </template>
      </el-table-column>
     
      <el-table-column
        label="版型工艺"
        align="center"
        prop="process_version"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.process_version }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '版型工艺', 'process_version', row.id, row.process_version)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="穿法特色"
        align="center"
        prop="threading_characteristics"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.threading_characteristics }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '穿法特点', 'threading_characteristics', row.id, row.threading_characteristics)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="主要面料特色"
        align="center"
        prop="fabric_characteristics"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.fabric_characteristics }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '主要面料特点', 'fabric_characteristics', row.id, row.fabric_characteristics)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="填充物"
        align="center"
        prop="filler"
        v-if="department.product"
        min-width="200"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.filler }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '填充物', 'filler', row.id, row.filler)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="注意事项"
        align="center"
        prop="matters_needing_attention"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.matters_needing_attention }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '注意事项', 'matters_needing_attention', row.id, row.matters_needing_attention)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="工艺细节解说"
        align="center"
        prop="process_explanation"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.process_explanation }}</div>

            <div v-if="row.chanping_status == 0">
              <!-- <el-button
                                type="text"
                                @click="onAllEdit(4, '工艺细节解说', 'process_explanation', row.id, row.process_explanation)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>-->
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品部确认状态"
        align="center"
        prop="chanping_status"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <div :style="{ color: row.chanping_status == 1 ? '#2c70d6' : '' }">
            {{ row.chanping_status == 0 ? "未确认" : "已确认" }}
          </div>
          <div v-if="row.chanping_up_username">
            确认人：{{ row.chanping_up_username }}
          </div>
          <div v-if="row.chanping_up_time">
            确认时间：{{ row.chanping_up_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品部确认"
        align="center"
        prop="chanping_status"
        min-width="200"
        v-if="department.product"
      >
        <template slot-scope="{ row }" v-if="qxobj.audit">
          <el-button
            type="text"
            @click="onAffirm(4, 0, row.id)"
            v-if="row.chanping_status == 0"
            >确认</el-button
          >
          <el-button
            type="text"
            @click="onAffirm(4, 1, row.id)"
            style="color: red"
            v-if="row.chanping_status == 1"
            >取消确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <MyTable></MyTable> -->
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminApiGetnew_products"
    />
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <div style="display: flex">
        <span>{{ title }}：</span>
        <div style="width: 80%">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="text"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAllAffirm()" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogVisibleImage" width="30%">
      <div style="display: flex; align-items: center">
        <span style="width: 80px">纹祥描述：</span>
        <div style="width: 80%">
          <el-input
            placeholder="请输入纹祥描述"
            v-model="theme_sampleNull.pattern_description"
          ></el-input>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <span style="width: 80px">纹祥图：</span>
        <div style="width: 80%">
          <el-upload
            class="avatar-uploader"
            action="/"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="theme_sampleNull.theme_sample"
              :src="theme_sampleNull.theme_sample"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleImage = false">取 消</el-button>
        <el-button type="primary" @click="onAffirmImage" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleIndex" width="30%">
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <span>版型指数：</span>
        <div style="width: 80%">
          <el-select v-model="modelvalue" placeholder="请选择">
            <el-option
              v-for="item in model"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <span>弹力指数：</span>
        <div style="width: 80%">
          <el-select v-model="stretchvalue" placeholder="请选择">
            <el-option
              v-for="item in stretch"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <span>硬度指数：</span>
        <div style="width: 80%">
          <el-select v-model="hardnessvalue" placeholder="请选择">
            <el-option
              v-for="item in hardness"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 10px">
        <span>厚度指数：</span>
        <div style="width: 80%">
          <el-select v-model="thicknessvalue" placeholder="请选择">
            <el-option
              v-for="item in thickness"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleIndex = false">取 消</el-button>
        <el-button type="primary" @click="onConfirmIndex" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog title="设置上新年月" :visible.sync="dialogVisibleSetDate" width="30%">
            <div>
                <el-date-picker
                    v-model="setdate"
                    type="month"
                    placeholder="选择年月"
                    value-format="yyyy-MM"
                ></el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleSetDate = false">取 消</el-button>
                <el-button type="primary" @click="onConfirmSetDate" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>-->
  </div>
</template>

<script>
import {
  postAdminApiGetnew_products,
  postAdminApiSetSuitRange,
  postAdminApiSetMarketingData,
  postAdminApiSetDesign_Department,
  postAdminApiSetProduct_department,
  uploadHomeApiupload,
  postAdminPricingGet_shujia_NewProducts,
  postAdminApiSetNew_products_save,
  postAdminApiGetNew_products_save,
} from "@/api";
import pagination from "@/components/pagination.vue";
import MyTable from "@/components/table.vue";
export default {
  components: { pagination, MyTable },
  data() {
    return {
      qxobj: {},
      height: "",
      loading: false,
      dialogVisible: false, // 编辑输入框
      dialogVisibleSetDate: false, //设置上新年月
      title: "", // 当前编辑的名字
      text: "", // 编辑的内容
      type: "", // 当前编辑的类型
      key: "", // 当前编辑的KEY
      rowid: "", // 当前编辑的id
      dialogVisibleImage: false, // 编辑纹祥图
      dialogVisibleIndex: false, // 编辑指数
      images: "",
      file: "",
      department: {
        OperationsDepartment: true,
        design: true,
        product: true,
        marketing: true,
      },
      model: ["紧身", "修身", "合体", "宽松"],
      modelvalue: "",
      stretch: ["无弹", "微弹", "超弹", "透视"],
      stretchvalue: "",
      hardness: ["柔软", "软", "适中", "偏硬"],
      hardnessvalue: "",
      thickness: ["透视", "偏薄", "适中", "偏厚"],
      thicknessvalue: "",
      tableData: [],
      total: 1,
      form: {
        page: 1,
        size: 10,
        title: "",
        new_year: "",
        new_month: "",
      },
      setdate: "", // 设置上新年月
      theme_sample: [],
      theme_sampleNull: {
        pattern_description: "",
        theme_sample: "",
      },
      theme_sampleIndex: "",
    };
  },
  activated() {
    this.qxobj = JSON.parse(this.$route.query.qxobj);
    this.height = document.documentElement.clientHeight - 400;
    let form = this.form;
    this.postAdminApiGetnew_products(form);
    this.postAdminApiGetNew_products_save();
  },
  methods: {
    // 获取上新年月
    postAdminApiGetNew_products_save() {
      postAdminApiGetNew_products_save().then((res) => {
        let data = res.data;
        this.form.new_year = `${data.new_year}-${data.new_month}`;
      });
    },
    // 设置上新月份
    onSetMonth() {
      this.setdate = "";
      this.dialogVisibleSetDate = true;
    },
    onConfirmSetDate() {
      let setdate = this.setdate;
      if (setdate) {
        this.loading = true;
        let form = {
          new_year: "",
          new_month: "",
        };
        let date = setdate.split("-");
        form.new_year = date[0];
        if (date[1] < 10) {
          date[1] = date[1].substring(date[1].length - 1);
        }
        form.new_month = date[1];
        postAdminApiSetNew_products_save(form)
          .then(async (res) => {
            this.$message.success("设置成功");
            this.loading = false;
            this.dialogVisibleSetDate = false;
            let form = this.form;
            await this.postAdminApiGetNew_products_save();
            await this.postAdminApiGetnew_products(form);
          })
          .catch((err) => {
            this.loading = false;
          });
      } else {
        this.$message.warning("请选择上新月份");
      }
    },
    // 更新上新表
    onUpdate() {
      // this.loading = true;
      this.$message.success("请5分钟后刷新页面查看");
      postAdminPricingGet_shujia_NewProducts()
        .then((res) => {
          let form = this.form;
          this.postAdminApiGetnew_products(form);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (
        row.column.property == "component" ||
        row.column.property == "sizelist" ||
        row.column.property == "recommend_size_group" ||
        row.column.property == "yunyin_status"
      ) {
        return "background:#FFF6ED"; //修改的样式
      }
      if (
        row.column.property == "product_description" ||
        row.column.property == "picture_matching" ||
        row.column.property == "component_details" ||
        row.column.property == "page_warm_tips" ||
        row.column.property == "childish_wit" ||
        row.column.property == "threading_description" ||
        row.column.property == "yingxiao_status"
      ) {
        return "background:#F5F3FE"; //修改的样式
      }
      if (
        row.column.property == "design_theme" ||
        row.column.property == "pattern_description" ||
        row.column.property == "theme_sample" ||
        row.column.property == "sheji_status"
      ) {
        return "background:#FDFDF9"; //修改的样式
      }
      if (
        row.column.property == "dressing_index" ||
        row.column.property == "process_version" ||
        row.column.property == "threading_characteristics" ||
        row.column.property == "fabric_characteristics" ||
        row.column.property == "filler" ||
        row.column.property == "matters_needing_attention" ||
        row.column.property == "process_explanation" ||
        row.column.property == "chanping_status"
      ) {
        return "background:#F5FBFF"; //修改的样式
      }
    },
    onEditCM(id) {
      this.$router.push({ name: "OnTheNewTableOperatingEdit", query: { id } });
    },
    beforeAvatarUpload(file) {
      this.file = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let _base64 = reader.result;
        this.theme_sampleNull.theme_sample = _base64;
      };
      return false;
    },
    // 编辑文样图
    onEditMT(item, e, index, id) {
      this.theme_sampleNull = e;
      this.theme_sample = item;
      this.rowid = id;
      this.theme_sampleIndex = index;
      this.dialogVisibleImage = true;
    },
    // 删除文样图
    onDeleteMT(item, index, id) {
      console.log(item, index);
      this.$confirm("确定删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          item.splice(index, 1);
          let obj = {
            id,
            theme_sample: item,
          };
          postAdminApiSetDesign_Department(obj).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            let form = this.form;
            this.postAdminApiGetnew_products(form);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑	主题文样图
    async onAffirmImage() {
      let { theme_sampleNull, theme_sample, file, rowid, theme_sampleIndex } =
        this;
      if (!theme_sampleNull.pattern_description) {
        this.$message.warning("请输入纹祥描述");
        return;
      }
      if (!theme_sampleNull.theme_sample && !file) {
        this.$message.warning("请先上传纹祥图");
        return;
      }

      if (file) {
        await uploadHomeApiupload(this.file).then((res) => {
          console.log("图片");
          theme_sampleNull.theme_sample = res.img;
        });
      }
      console.log("theme_sampleIndex----》", theme_sampleIndex);
      if (theme_sampleIndex != "") {
        theme_sample[theme_sampleIndex] = theme_sampleNull;
      } else {
        theme_sample.push(theme_sampleNull);
      }
      let obj = {
        id: rowid,
        theme_sample,
      };
      await postAdminApiSetDesign_Department(obj).then((res) => {
        this.$message.success("编辑成功");
        let form = this.form;
        this.postAdminApiGetnew_products(form);
        this.dialogVisibleImage = false;
      });
    },
    // 删除
    onDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增指数类别
    onAdd() {
      this.$prompt("", "新增指数类别", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          if (value) return true;
          return false;
        },
        inputPlaceholder: "请输入指数类别",
        inputErrorMessage: "请输入指数类别",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 上新表列表
    async postAdminApiGetnew_products(data) {
      this.loading = true;
      let form = JSON.parse(JSON.stringify(data));
      console.log(form.new_year);
      if (form.new_year) {
        let date = form.new_year.split("-");
        form.new_year = date[0];
        if (date[1] < 10) {
          date[1] = date[1].substring(date[1].length - 1);
        }
        form.new_month = date[1];
      }
      postAdminApiGetnew_products(form)
        .then((res) => {
          this.loading = false;
          console.log("上新表列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminApiGetnew_products(this.form);
    },
    // 单个编辑
    onAllEdit(type, title, key, id, text) {
      this.type = type;
      this.title = title;
      this.key = key;
      this.text = text || "";

      if (key == "theme_sample") {
        this.theme_sampleNull = {
          pattern_description: "",
          theme_sample: "",
        };
        this.rowid = id.id;
        this.theme_sample = id.theme_sample;
        this.theme_sampleNull = {
          pattern_description: "",
          theme_sample: "",
        };
        this.theme_sampleIndex = "";
        this.dialogVisibleImage = true;
        return;
      }
      this.rowid = id;
      this.dialogVisible = true;
    },
    // 单个确认
    onAllAffirm() {
      this.loading = true;
      let { title, text, type, key, rowid } = this;
      if (text) {
        if (type == 1) {
          let obj = {
            id: rowid,
          };
          obj[key] = text;
          postAdminApiSetSuitRange(obj).then((res) => {
            this.$message.success("编辑成功");
            let form = this.form;
            this.postAdminApiGetnew_products(form);
            this.dialogVisible = false;
          });
        }
        if (type == 2) {
          let obj = {
            id: rowid,
          };
          obj[key] = text;
          postAdminApiSetMarketingData(obj).then((res) => {
            this.$message.success("编辑成功");
            let form = this.form;
            this.postAdminApiGetnew_products(form);
            this.dialogVisible = false;
          });
        }
        if (type == 3) {
          let obj = {
            id: rowid,
          };
          obj[key] = text;
          postAdminApiSetDesign_Department(obj).then((res) => {
            this.$message.success("编辑成功");
            let form = this.form;
            this.postAdminApiGetnew_products(form);
            this.dialogVisible = false;
          });
        }
        if (type == 4) {
          let obj = {
            id: rowid,
          };
          obj[key] = text;
          postAdminApiSetProduct_department(obj).then((res) => {
            this.$message.success("编辑成功");
            let form = this.form;
            this.postAdminApiGetnew_products(form);
            this.dialogVisible = false;
          });
        }
      } else {
        this.loading = false;
      }
    },
    // 部门确认和取消
    onAffirm(type, state, id) {
      let text = "";
      if (state) {
        text = "即将取消确认此款式";
      } else {
        text = "即将确认此款式";
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log();
          if (type == 1) {
            let obj = {
              id,
            };
            if (state == 0) {
              obj.yunyin_status = 1;
            } else {
              obj.yunyin_status = 0;
            }
            postAdminApiSetSuitRange(obj).then((res) => {
              this.$message.success("编辑成功");
              let form = this.form;
              this.postAdminApiGetnew_products(form);
            });
          }
          if (type == 2) {
            let obj = {
              id,
            };
            if (state == 0) {
              obj.yingxiao_status = 1;
            } else {
              obj.yingxiao_status = 0;
            }
            postAdminApiSetMarketingData(obj).then((res) => {
              this.$message.success("编辑成功");
              let form = this.form;
              this.postAdminApiGetnew_products(form);
            });
          }
          if (type == 3) {
            let obj = {
              id,
            };
            if (state == 0) {
              obj.sheji_status = 1;
            } else {
              obj.sheji_status = 0;
            }
            postAdminApiSetDesign_Department(obj).then((res) => {
              this.$message.success("编辑成功");
              let form = this.form;
              this.postAdminApiGetnew_products(form);
            });
          }
          if (type == 4) {
            let obj = {
              id,
            };
            if (state == 0) {
              obj.chanping_status = 1;
            } else {
              obj.chanping_status = 0;
            }
            postAdminApiSetProduct_department(obj).then((res) => {
              this.$message.success("编辑成功");
              let form = this.form;
              this.postAdminApiGetnew_products(form);
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 指数
    onIndex(id) {
      this.rowid = id;
      this.modelvalue = "";
      this.stretchvalue = "";
      this.hardnessvalue = "";
      this.thicknessvalue = "";
      this.dialogVisibleIndex = true;
    },
    // 指数确认
    onConfirmIndex() {
      let { modelvalue, stretchvalue, hardnessvalue, thicknessvalue, rowid } =
        this;
      if (modelvalue && stretchvalue && hardnessvalue && thicknessvalue) {
        this.loading = true;
        let obj = {
          id: rowid,
        };
        obj.dressing_index = [
          modelvalue,
          stretchvalue,
          hardnessvalue,
          thicknessvalue,
        ];
        postAdminApiSetSuitRange(obj).then((res) => {
          this.$message.success("编辑成功");
          let form = this.form;
          this.postAdminApiGetnew_products(form);
          this.dialogVisibleIndex = false;
        });
      } else {
        this.$message.warning("选择内容不能为空");
        this.loading = false;
      }
    },
    onChangeTable() {
      this.$nextTick((res) => {
        this.$refs.ElTableHeaderRef.doLayout();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sizelist {
  display: flex;
  > div {
    width: 120px;
  }
}
.myform {
  display: flex;
  // justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}

.Mytable {
  display: flex;
  > div {
    width: 100px;
    text-align: center;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  // /deep/ .el-table--scrollable-y {
  //     .el-table__body-wrapper::-webkit-scrollbar {
  //         width: 9px;
  //         height: 9px;
  //     }
  //     .gutter {
  //         width: 10px !important;
  //     }
  // }
}
</style>
